<template>
    <div class="header">
    <div class="personBox">
      <div class="yonghu">
        <i class="iconfont icon-yonghu" v-if="!image"></i>
        <img class="headImage" v-else :src="getImageUrl(image)" />
        <span class="loginName">{{ username }}</span>
      </div>
       <div class="list">
            <span class="title">个人中心</span>
            <span class="logout" @click="logout">退出登录</span>
        </div>
    </div>
      <div class="colloction">
        <span>个人信息管理</span>
      </div>
      <div class="toHome">
        <span @click="toHome">返回首页</span>
      </div>
    </div>
  </template>
  
  <script>
  import { mapState } from 'vuex';
  export default {
    name:"personHead",
      data(){
          return {   
          }
      },
      computed:{
          ...mapState('login',['username',"image","role"]),
      },
      methods:{
        getImageUrl(imageName) {
      const prefix = this.$imagePrefix;
      console.log(prefix);
      return `${prefix}${imageName}`;
    },
        toHome(){
          if (this.role == "admin") 
            this.$router.push({ name: 'relicList' });  
          else
          this.$router.push({ name: 'RoleManage' });  
        },
        logout(){
            this.$confirm('确认要退出登录吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              customClass:'set_custom_class',
              closeOnClickModal: false,
              type: 'warning'
            }).then(() => {
              localStorage.clear();
              sessionStorage.clear();
              this.$router.push({ name: 'login' });  
              this.$message({
                type: 'success',
                message: '已成功退出登录!'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消退出登录'
              });          
            });
        }
      }
  
  }
  </script>
  
  <style scoped>
  .header{
      display:flex;
      background: rgba(42,81,77, 1);
      height:80px;
      position:sticky;
      top:0;
      z-index: 1;
  }
  .personBox {
  display: inline-block;
  flex-shrink: 0;
  width: 300px;
  /* line-height: 70px; */
  vertical-align: middle;
  text-align: center;
  color: #fff;
}
  .yonghu {
  display: inline-block;
  width: 90px; 
  line-height: 40px;
  height: 80px;
  vertical-align: middle;
  flex-shrink: 0;
  text-align: center;
  color: #fff;
}
.loginName {
  display: block;
  font-size: 14px;
  width: 90px;
  height: 10px;
  line-height: 10px;
  text-align: center;
  margin: 0px auto;
}
.headImage {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.icon-yonghu{
  color: #fff;
  font-size: 45px;
}
.list {
  display: inline-block;
  font-size: 12px;
  width: 90px;
  height: 80px;
  text-align: start;
}
.list span {
  display: inline-block;
  height: 40px;
}
.list span:nth-child(1) {
  font-size: 20px;
  font-weight: bold;
  transform: translateY(15px);
}
.list span:nth-child(2) {
  padding-left: 2px;
  height: 20px;
  transform: translateY(20px);
}
  .colloction{
      display: flex;
      width: 900px; 
      font-size:25px;
      font-family: '楷体';
      height:50px;
      line-height: 50px;
      background: rgba(42,81,77, 1);
      
  }
  .colloction span{
    display:block;
    margin: 20px auto;
    width: 200px; 
    border: 1px solid #ffffff;
    border-radius: 20px;
    color: rgba(42,81,77, 1);
    text-align: center;
    height:40px;
    line-height: 40px;
    background: #fff;
  }
  .toHome{
      display: inline-block;
      width: 200px; 
      font-size:20px;
      font-family: '楷体';
      height:50px;
      line-height: 50px;
      background: rgba(42,81,77, 1);
      
  }
  .toHome span{
    display:block;
    margin: 20px auto;
    width: 150px; 
    border: 1px solid #ffffff;
    border-radius: 20px;
    color: rgb(255, 255, 255);
    text-align: center;
    height:40px;
    line-height: 40px;
    background:rgba(42,81,77, 1);
  }
  .toHome span:hover{
    cursor: pointer;
    background: rgb(59, 111, 106);
  }
  </style>